<template>
  <div class="timeline-wrapper">
    <div class="timeline-grid" style="height: 500px" v-for="(item, i) of items" :key="item.path">
      <div class="grid-name-box" :class=getClass(i)>
        <div class="grid-name">
          <span>{{item.name}}</span>
        </div>
      </div>
      <div class="grid-date" :class=getClass(i)>
        <span>{{shortDate(item.datetime)}}</span>
      </div>
      <div class="grid-v-line" :class=getClass(i)>
        <div class="grid-v-round"></div>
      </div>
      <div class="grid-h-line" :class=getClass(i)></div>
      <div class="grid-img" :class=getClass(i)>
        <img :src="item.image" @click="funcClick(item)">
        <div class="button-box" v-if="editable">
          <button class="button-share-item" @click="funcShare(item)">
            <img src="@media/module/module-share@2x.png">
          </button>
          <button v-if="item.bool" class="button-edit" @click="funcEdit(item)">
            <img src="@media/module/module-edit@2x.png">
          </button>
          <button v-if="item.bool" class="button-delete" @click="funcDelete(item)">
            <img src="@media/module/module-delete@2x.png">
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'TimeLine',
  props: {
    items: {
      type: Array,
      default: () => (
          [
            {
              address: "sed dolore enim exercitation dolore",
              datetime: "magna",
              name: "nostrud",
              scale: "enim nisi eiusmod dolor",
              uid: "consectetur",
              year: -90648209.14659637
            }
          ]
      )
    },
    editable: {
      type: Boolean,
      default: false
    },
    funcClick: Function,
    funcShare: Function,
    funcEdit: Function,
    funcDelete: Function,
  },
  data () {
    return {
    };
  },
  methods: {
    getClass(i) {
      switch (i%4) {
        case 0:
          return "yellow"
        case 1:
          return "green"
        case 2:
          return "purple"
        case 3:
          return "blue"
      }
    },
    shortDate(date) {
      return date.replace(/^([\d]{4}-)|( [\S]*)$/g, '').replace(/^(0)/g, '').replace(/-0/g, '-')
    },
  },
  computed: {

  },
  components: {
  },
  created () {
  },
  watch: {
  }
}
</script>

<style scoped lang="scss">
@import "@/style/scss/component/timeLine.scss"
</style>

